<template>
  <view @click="isMore = false">
    <view class="goods-head" :style="'background:rgba(255,255,255,' + PageScrollTop / 100 + ')'">
      <!-- 返回 -->
<!--      <view class="back" @click="onBack">
        <view class="back-one" :class="{ action: PageScrollTop > 120 }">
          <text></text>
        </view>
      </view>-->
      <back :page-scroll-top="PageScrollTop"/>
    </view>
    <!-- banner，标题 -->
    <view class="banner-title">
      <!-- banner -->
      <view class="banner">
        <swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
          <swiper-item v-for="(item, index) in goodsInfo.imgs" :key="index">
            <image :src="item" mode="aspectFill"></image>
            <!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false
            }}" objectFit="cover" wx:if="{{item.type == 'video'}}"></video> -->
          </swiper-item>
        </swiper>
      </view>
      <!-- 价格 -->
   <!--   <view class="price-info">
        <view class="price">
          <text class="min">￥</text>
          <text class="max">{{goodsInfo.price}}</text>
          <text class="min">.00</text>
        </view>
       
      </view> -->
	  <view class="price-info">
	  	<view class="user-price">
			
	  		<text class="min">折扣价￥</text>
	  		<text class="max">{{goodsInfo.price}}</text>
	  	</view>
	  	<view class="vip-price">
	  		零售价
	  		<text>￥{{goodsInfo.market_price}}</text>
	  	</view>
	  </view>
	 
		
      <!-- 标题 -->
      <view class="goods-title">
        <text>{{goodsInfo.title}}</text>
      </view>
     
    </view>
 

   
 
    <!-- 商品介绍 -->
    <view class="products-introduction" ref="products">
      <view class="title">
        <text>商品介绍</text>
      </view>
      <view class="content" v-html="goodsInfo.details"></view>
    </view>
    <!-- 底部 -->
    <view class="page-footer">
     
      <view class="footer-buy">
      <!--  <view class="cart-add" @click="$refs['GoodsAttr'].show(2)">
          <text>加入购物车</text>
        </view> -->
        <view class="buy-at" @click="confimOrder(goodsInfo.id)">
          <text>立即购买</text>
        </view>
      </view>
    </view>
    <!-- 服务弹窗 -->
    <goods-serve ref="GoodsServe"></goods-serve>
    <!-- 优惠券 -->
    <goods-coupon ref="GoodsCoupon"></goods-coupon>
    <!-- 属性规格 -->
    <goods-attr ref="GoodsAttr"></goods-attr>
  </view>
</template>

<script>
import GoodsServe from '../../components/GoodsServe/GoodsServe.vue';
import GoodsCoupon from '../../components/GoodsCoupon/GoodsCoupon.vue';
import GoodsAttr from '../../components/GoodsAttr/GoodsAttr.vue';
	import {
		mapState
	} from 'vuex'
import back from "@/components/headback/back.vue";
export default {
  components: {
    back,
    GoodsServe,
    GoodsCoupon,
    GoodsAttr,
  },
  data() {
    return {
	  addressInfor:{},
      TabShow: 0,
      isMore: false,
      AttentionShow: 0,
	  goodsInfo:{},
      swiperList: [
        {
          id: 0,
          type: 'image',
          url: '/static/img/goods_banner_01.webp'
        },
        {
          id: 1,
          type: 'image',
          url: '/static/img/goods_banner_02.webp'
        },
        {
          id: 2,
          type: 'image',
          url: '/static/img/goods_banner_03.webp'
        },
        {
          id: 3,
          type: 'image',
          url: '/static/img/goods_banner_04.webp'
        },
        {
          id: 4,
          type: 'image',
          url: '/static/img/goods_banner_05.webp'
        },
      ],
      web_content:
          '<div class="m-img"><img src="https://zhedplus.oss-cn-hangzhou.aliyuncs.com/content_img/20191118/1fb5ff162f25fd4c7383bd998ff2fde9.jpg"><div class="tools" hidden><i class="fa fa-arrow-up move-up"></i><i class="fa fa-arrow-down move-down"></i><em class="move-remove" hidden ><i class="fa fa-times" aria-hidden="true"></i> 移除</em><div class="cover"></div></div></div>',
      PageScrollTop: 0,
			type: 0,
    };
  },
	onLoad(params) {
		this.id = params.id||0;
		this.getGoodsDetails()
	},
	computed: {
		...mapState(['hasLogin','userInfo'])
	},
	onPageScroll(e) {
		this.PageScrollTop = e.scrollTop;
	},

  methods: {
	  // 详情
	  getGoodsDetails(){
	  	this.$u.api.goodsListDetail({goods_id:this.id}).then(res => {
	  			if (res.status) {
	  				this.goodsInfo = res.msg
	  			}
	  		})
	  		.catch(err => {
	  			console.log(err);
	  		})
	  },
	  // 购买
	  confimOrder(id){
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return
			}else{
				if(this.goodsInfo.flag=='vip'&&this.goodsInfo.sw_level>=1){
					uni.showToast({
						title: '新人福利仅限购买一次',
						icon: 'none',
						duration: 3000,
						success(){
							// uni.navigateBack()
						}
					});
				}else{
					uni.navigateTo({url:'/pages/ConfirmOrder/ConfirmOrder?id='+this.goodsInfo.id})
				}
			}
			return false
			this.$u.api.ordersPre({goods_id:id}).then(res => {
					if (res.status) {
						
					}
				})
				.catch(err => {
					console.log(err);
				})
		  
	  },
    /**
     * 返回
     */
    onBack() {
      uni.navigateBack();
    },
  }
};
</script>

<style scoped lang="scss">
@import 'GoodsDetails.scss';
	
</style>
